    // 基础图表组件 - 其他所有柱状图表组件的父类
    class BaseBarChartComponent extends HTMLElement {
        constructor() {
            super();

            this.chart = null;
            this.timerId = null;
            this.observer = null;

            const echartTimerScript = "";
            // 创建Shadow DOM
            const shadow = this.attachShadow({ mode: 'closed' });

            // 创建模板
            const template = document.createElement("template");
            template.innerHTML = `
                <style>
                    :host {
                        display: block;
                         width: 100%;
                         height: 100%;
                    }
                    .chart-container {
                        width: 100%;
                        height: 100%;
                        min-width: 600px; /* 最小宽度（拖拽缩小的下限） */
                        min-height: 300px; /* 最小高度（拖拽缩小的下限） */
                    }
                </style>
                <div class="chart-container"></div>
            `;


            // 克隆模板内容
            shadow.appendChild(template.content.cloneNode(true));

            // 获取图表容器
            const chartDiv = shadow.querySelector('.chart-container');

            // 初始化图表实例
            this.chart = echarts.init(chartDiv);
        }

        // 监听的属性列表 - 子类可以重写
        static get observedAttributes() {
            return window.getAttributesByType('bar');
        }

        // 默认配置 - 子类应重写此方法提供特定配置
        getDefaultConfig() {
            return {
                titleAttrs: [
                    ['title-show_radio', true],
                    ['title-text_text', 'Demo标题'],
                    ['title-left_slider', 'center'],
                    ['title-top_slider', ''],
                    ['title-right_slider', ''],
                    ['title-bottom_slider', ''],
                    ['title-textalign_select', 'center'],
                    ['title-textstyle-color_colorpicker', '#333'],
                    ['title-textstyle-fontsize_number', 18],
                    ['title-textstyle-fontweight_select', 'bold'],
                    ['title-subtext_text', ''],
                    ['title-subtextstyle-color_colorpicker', '#666'],
                    ['title-subtextstyle-fontsize_number', 14],
                    ['title-subtextstyle-fontweight_select', 'normal'],
                ],
                gridAttrs: [
                    ['grid-left_slider', '10%'],
                    ['grid-right_slider', '10%'],
                    ['grid-bottom_slider', '10%'],
                    ['grid-top_slider', '20%'],
                    ['grid-containlabel_radio', true],
                ],
                xAxisAttrs: [
                    ['xaxis-type_text', 'category'],
                    ['xaxis-data_array', JSON.stringify(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])],
                ],
                yAxisAttrs: [
                    ['yaxis-type_text', 'value'],
                ],
                legendAttrs: [
                    ['legend-show_radio', true],
                    ['legend-textstyle-color_colorpicker', '#666'],
                    ['legend-itemstyle-color_colorpicker', 'auto'],
                    ['legend-itemheight_number', 14],
                    ['legend-itemwidth_number', 25],
                    ['legend-bottom_number', "90%"],
                    ['legend-top_number', ""],
                    ['legend-left_number', "50%"],
                    ['legend-itemgap_number', 20],
                    ['legend-textstyle-fontsize_number', 12]
                ],
                seriesAttrs: [
                    ['base-data-url_text', ''],
                    ['base-echart-init-script_text', ''], // 初始化脚本
                    ['base-echart-timer-script_text', ''], //定时器脚本
                    ['series-type_select', 'bar'],
                    ['series-smooth_radio', false],
                    ['series-areastyle-color_colorpicker', ''],
                    ['series-areastyle-show_radio', false],
                    ['series-areastyle-color-gradient-show_radio', false],
                    ['series-areastyle-color-start_colorpicker', ''],
                    ['series-areastyle-color-end_colorpicker', ''],
                ]
            };
        }

        // 默认渐变色方案
        getDefaultGradients() {
            return [
                { start: 'rgb(55, 162, 255)', end: 'rgb(116, 21, 219)' },
                { start: 'rgb(128, 255, 165)', end: 'rgb(1, 191, 236)' },
                { start: 'rgb(0, 221, 255)', end: 'rgb(77, 119, 255)' },
                { start: 'rgb(255, 0, 135)', end: 'rgb(135, 0, 157)' },
                { start: 'rgb(255, 191, 0)', end: 'rgb(224, 62, 76)' }
            ];
        }

        connectedCallback() {
            // 导入工具函数
            const { buildConfig } = window.attributeUtils;
            const config = this.getDefaultConfig();

            // 生成配置
            const titleConfig = buildConfig(this, config.titleAttrs);
            const gridConfig = buildConfig(this, config.gridAttrs);
            const xAxisConfig = buildConfig(this, config.xAxisAttrs);
            const yAxisConfig = buildConfig(this, config.yAxisAttrs);
            const legendConfig = buildConfig(this, config.legendAttrs);
            const seriesConfig = buildConfig(this, config.seriesAttrs);

            // 调整初始大小
            this.resizeChart();
            // 监听resize事件
            window.addEventListener('resize', this.resizeChart.bind(this));
            // 观察父容器的大小变化
            if (ResizeObserver) {
                this.observer = new ResizeObserver(() => this.resizeChart());
                this.observer.observe(this.parentElement);
            }
            console.log("数据url:"+ seriesConfig.dataUrl)
            // 加载数据并渲染图表
            if (seriesConfig.dataUrl) {
                this.loadDataAndRender(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig);
            } else {
                // 使用默认数据渲染
                this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig);
            }

            // 执行外部初始化脚本
            if (seriesConfig.echartInitScript) {
                try {
                    eval(seriesConfig.echartInitScript);
                } catch (e) {
                    console.error('执行初始化脚本错误:', e);
                }
            }
            // 定时器脚本记录
            if (seriesConfig.echartTimerScript){
                try {
                    this.echartTimerScript = seriesConfig.echartTimerScript;
                }catch ( e) {
                    console.error('执行定时器脚本错误:', e);
                }
            }

        }

        // 加载数据并渲染图表
        loadDataAndRender(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig) {
            fetch(seriesConfig.dataUrl)
                .then(res => {
                    if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
                    return res.json();
                })
                .then(data => {
                    this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, data);
                })
                .catch(err => {
                    console.error('数据获取失败:', err);
                    // 使用默认数据
                    this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig);
                });
        }

        // 渲染图表 - 子类可以重写以实现特定逻辑
        renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, data = null) {
            // 处理数据
            console.log("柱形图默认数据:" + JSON.stringify(data));
            let dataDemo = data || this.getDefaultData();

            // 生成 series 数组
            const series = this.generateSeries(dataDemo, seriesConfig);

            // 设置 X 轴数据：取第一组的 name 列表作为 X 轴类目
            if (dataDemo.length > 0) {
                const firstItem = dataDemo[0];
                const firstKey = Object.keys(firstItem)[0];
                xAxisConfig.data = firstItem[firstKey].map(item => item.name);
            }

            // 构造 X 轴 axisLabel 对象
            const axisLabelConfig = {
                color: xAxisConfig.color || '#333',
                fontSize: xAxisConfig.fontSize || 12
            };

            // 判断是否需要自动换行
            if (xAxisConfig.axislabelReplace === true) {
                const maxCharPerLine = xAxisConfig.maxChar || 8; // 默认每 8 个字符换行
                const reg = new RegExp(`(.{${maxCharPerLine}})`, 'g');
                axisLabelConfig.formatter = function (value) {
                    return String(value).replace(reg, '$1\n');
                };
            }

            const option = {
                grid: {
                    left: gridConfig.left,
                    right: gridConfig.right,
                    bottom: gridConfig.bottom,
                    top: gridConfig.top,
                    containLabel: gridConfig.containlabel,
                },
                title: {
                    show: titleConfig.show,
                    text: titleConfig.text,
                    left: titleConfig.left,
                    right: titleConfig.right,
                    top: titleConfig.top,
                    bottom: titleConfig.bottom,
                    textAlign: titleConfig.textalign,
                    textStyle: {
                        color: titleConfig.textstyleColor,
                        fontSize: titleConfig.textstyleFontsize,
                        fontWeight: titleConfig.textstyleFontweight,
                    },
                    subtext: titleConfig.subtext,
                    subtextStyle: {
                        color: titleConfig.subtextstyleColor,
                        fontSize: titleConfig.subtextstyleFontsize,
                        fontWeight: titleConfig.subtextstyleFontweight,
                    },
                },
                legend: {
                    show: legendConfig.show,
                    bottom: legendConfig.bottom,
                    left: legendConfig.left,
                    top: legendConfig.top,
                    orient: legendConfig.orient,
                    itemWidth: legendConfig.itemwidth,
                    itemHeight: legendConfig.itemheight,
                    textStyle: {
                        color: legendConfig.textstyleColor,
                        fontSize: legendConfig.textstyleFontsize
                    },
                    itemStyle: {
                        color: legendConfig.itemstyleColor
                    },
                    itemGap: legendConfig.itemgap,
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: xAxisConfig.type,
                    data: xAxisConfig.data,
                    axisLabel: axisLabelConfig
                },
                yAxis: {
                    type: yAxisConfig.type,
                    data: yAxisConfig.data
                },
                series: series
            };

            console.log("柱形图配置项:" + JSON.stringify(option));
            this.chart.setOption(option);
        }


        // 生成系列配置 - 子类可以重写
        generateSeries(dataDemo, seriesConfig) {
            const defaultGradients = this.getDefaultGradients();

            return dataDemo.map((item, index) => {
                const gradientIndex = index % defaultGradients.length;
                const defaultGradient = defaultGradients[gradientIndex];

                const key = Object.keys(item)[0];
                const seriesName = `${key}${index + 1}`;
                const dataList = item[key];

                return {
                    name: seriesName,
                    data: dataList.map(item => item.value),
                    type: seriesConfig.type || 'bar',
                    stack: seriesConfig.stack || null,
                    smooth: seriesConfig.smooth || false,
                    ...(seriesConfig.areastyleShow ? {
                        areaStyle: {
                            color: seriesConfig.areastyleColorGradientShow
                                ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: seriesConfig.areastyleColorStart || defaultGradient.start },
                                    { offset: 1, color: seriesConfig.areastyleColorEnd || defaultGradient.end }
                                ])
                                : seriesConfig.areastyleColor || defaultGradient.start
                        }
                    } : {})
                };
            });
        }

        // 获取默认数据 - 子类可以重写
        getDefaultData() {
            return [
                {
                    "销量": [
                        { "name": "1月", "value": 1200 },
                        { "name": "2月", "value": 1900 },
                        { "name": "3月", "value": 1500 },
                        { "name": "4月", "value": 2400 },
                        { "name": "5月", "value": 1800 },
                        { "name": "6月", "value": 3000 }
                    ]
                }
            ];
        }

        // 属性变化时更新图表
        attributeChangedCallback(name, oldValue, newValue) {
            if (name && oldValue !== newValue) {
                const currentOptions = this.chart.getOption();
                if (!currentOptions) return;

                this.handleAttributeChange(name, newValue, currentOptions);
            }
        }

        // 处理属性变化 - 子类可以扩展
        handleAttributeChange(name, value, currentOptions) {
            // 统一获取默认渐变色（供区域、折线图渐变使用）
            const defaultGradients = this.getDefaultGradients();
            // 存储更新后的配置（外部函数返回新配置）
            let updatedOptions;

            switch (name) {
                // ======================
                // 1. 区域样式相关（area-style-updaters.js）
                // ======================
                case 'series-areastyle-color-gradient-show_radio':
                    updatedOptions = updateGradientStyle(value, currentOptions, defaultGradients);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-areastyle-show_radio':
                    updatedOptions = updateAreaStyle(value, currentOptions, defaultGradients);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-areastyle-color_colorpicker':
                    updatedOptions = updateAreaColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-smooth_radio':
                    updatedOptions = updateSmooth(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-line-style-width_number':
                    updatedOptions = updateLineWidth(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-line-style-color_colorpicker':
                    updatedOptions = updateLineColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 2. 标题相关（title-updaters.js）
                // ======================
                case 'title-show_radio':
                    updatedOptions = updateTitleVisibility(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-text_text':
                    updatedOptions = updateTitleText(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-textstyle-color_colorpicker':
                    updatedOptions = updateTitleStyle('color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-textstyle-fontsize_number':
                    updatedOptions = updateTitleStyle('fontSize', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-textstyle-fontweight_select':
                    updatedOptions = updateTitleFontWeight('title', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-textstyle-fontstyle_select':
                    updatedOptions = updateTitleStyle('fontStyle', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-subtext_text':
                    updatedOptions = updateSubtitleText(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-subtextstyle-color_colorpicker':
                    updatedOptions = updateSubtitleTextColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-subtextstyle-fontsize_number':
                    updatedOptions = updateSubtitleFontSize(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-subtextstyle-fontweight_select':
                    updatedOptions = updateTitleFontWeight('subtitle', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-subtextstyle-fontstyle_select':
                    updatedOptions = updateSubtitleStyle('fontStyle', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-left_slider':
                    updatedOptions = updateTitlePosition('left', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-top_slider':
                    updatedOptions = updateTitlePosition('top', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-right_slider':
                    updatedOptions = updateTitlePosition('right', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-bottom_slider':
                    updatedOptions = updateTitlePosition('bottom', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-itemgap_number':
                    updatedOptions = updateTitleItemGap(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'title-textalign_select':
                    updatedOptions = updateTitleTextAlign(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 3. 网格相关（grid-updaters.js）
                // ======================
                case 'grid-left_slider':
                    updatedOptions = updateGridPosition('left', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'grid-right_slider':
                    updatedOptions = updateGridPosition('right', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'grid-top_slider':
                    updatedOptions = updateGridPosition('top', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'grid-bottom_slider':
                    updatedOptions = updateGridPosition('bottom', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'grid-containlabel_radio':
                    updatedOptions = updateGridContainLabel(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 4. 图例相关（legend-updaters.js）
                // ======================
                case 'legend-show_radio':
                    updatedOptions = updateLegendVisibility(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-left_number':
                    updatedOptions = updateLegendPosition('left', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-top_number':
                    updatedOptions = updateLegendPosition('top', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-right_number':
                    updatedOptions = updateLegendPosition('right', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-bottom_number':
                    updatedOptions = updateLegendPosition('bottom', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-textstyle-color_colorpicker':
                    updatedOptions = updateLegendTextStyle('color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-textstyle-fontsize_number':
                    updatedOptions = updateLegendTextStyle('fontSize', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-itemwidth_number':
                    updatedOptions = updateLegendItemStyle('itemWidth', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-itemheight_number':
                    updatedOptions = updateLegendItemStyle('itemHeight', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-itemgap_number':
                    updatedOptions = updateLegendItemGap(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-textstyle-fontweight_select':
                    updatedOptions = updateLegendFontWeight(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-textstyle-fontstyle_select':
                    updatedOptions = updateLegendTextStyle('fontStyle', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-orient_select':
                    updatedOptions = updateLegendOrientation(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-selectmode_select':
                    updatedOptions = updateLegendSelectMode(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'legend-itemstyle-color_colorpicker':
                    updatedOptions = updateLegendItemStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 5. 提示框相关（tooltip-updaters.js）
                // ======================
                case 'tooltip-show_radio':
                    updatedOptions = updateTooltipVisibility(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-trigger_select':
                    updatedOptions = updateTooltipTrigger(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-type_select':
                    updatedOptions = updateTooltipAxisPointerType(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-snap_radio':
                    updatedOptions = updateTooltipAxisPointerSnap(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-label-show_radio':
                    updatedOptions = updateTooltipAxisPointerLabelVisibility(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-label-color_colorpicker':
                    updatedOptions = updateTooltipAxisPointerLabelColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-label-fontsize_number':
                    updatedOptions = updateTooltipAxisPointerLabelFontSize(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-label-fontweight_select':
                    updatedOptions = updateTooltipAxisPointerLabelFontWeight(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-label-fontstyle_select':
                    updatedOptions = updateTooltipAxisPointerLabelFontStyle(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-linestyle-color_colorpicker':
                    updatedOptions = updateTooltipAxisPointerLineStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-axispointer-linestyle-width_number':
                    updatedOptions = updateTooltipAxisPointerLineStyleWidth(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-formatter_text':
                    updatedOptions = updateTooltipFormatter(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-backgroundcolor_colorpicker':
                    updatedOptions = updateTooltipBackgroundColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-bordercolor_colorpicker':
                    updatedOptions = updateTooltipBorderColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-borderwidth_number':
                    updatedOptions = updateTooltipBorderWidth(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'tooltip-padding_number':
                    updatedOptions = updateTooltipPadding(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 6. 系列通用相关（series-common-updaters.js）
                // ======================
                case 'series-label-show_radio':
                    updatedOptions = updateSeriesLabelVisibility(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-position_select':
                    updatedOptions = updateSeriesLabelPosition(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-distance_number':
                    updatedOptions = updateSeriesLabelDistance(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-color_colorpicker':
                    updatedOptions = updateSeriesLabelColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-fontsize_number':
                    updatedOptions = updateSeriesLabelFontSize(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-fontweight_select':
                    updatedOptions = updateSeriesLabelFontWeight(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-fontstyle_select':
                    updatedOptions = updateSeriesLabelFontStyle(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-label-formatter_text':
                    updatedOptions = updateSeriesLabelFormatter(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-labelline-show_radio':
                    updatedOptions = updateSeriesLabelLineVisibility(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-stack_text':
                    updatedOptions = updateSeriesStack(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-labelline-linestyle-color_colorpicker':
                    updatedOptions = updateSeriesLabelLineStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-labelline-linestyle-width_number':
                    updatedOptions = updateSeriesLabelLineStyleWidth(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-itemstyle-color_array':
                    updatedOptions = updateSeriesItemStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-itemstyle-bordercolor_colorpicker':
                    updatedOptions = updateSeriesItemStyleBorderColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 7. 柱状图系列相关（bar-series-updaters.js）
                // ======================
                case 'series-barmaxwidth_slider':
                    updatedOptions = updateSeriesBarMaxWidth(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-itemstyle-borderradius_number':
                    updatedOptions = updateSeriesItemStyleBorderRadius(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-bargap_text':
                    updatedOptions = updateSeriesBarGap(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-barminheight_slider':
                    updatedOptions = updateSeriesBarMinHeight(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-showbackground_radio':
                    updatedOptions = updateSeriesShowBackground(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-backgroundstyle-color_colorpicker':
                    updatedOptions = updateSeriesBackgroundStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-backgroundstyle-bordercolor_colorpicker':
                    updatedOptions = updateSeriesBackgroundStyleBorderColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-backgroundstyle-borderwidth_number':
                    updatedOptions = updateSeriesBackgroundStyleBorderWidth(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-backgroundstyle-bordertype_select':
                    updatedOptions = updateSeriesBackgroundStyleBorderType(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-backgroundstyle-opacity_slider':
                    updatedOptions = updateSeriesBackgroundStyleOpacity(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-itemstyle-borderradius_slider':
                    updatedOptions = updateSeriesItemStyleBorderRadius(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-barminwidth_slider':
                    updatedOptions = updateSeriesBarMinWidth(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-emphasis-itemstyle-shadowblur_number':
                    updatedOptions = updateSeriesEmphasisItemStyleShadowBlur(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-emphasis-itemstyle-shadowcolor_colorpicker':
                    updatedOptions = updateSeriesEmphasisItemStyleShadowColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-barcategorygap_text':
                    updatedOptions = updateSeriesBarCategoryGap(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 8. 折线图系列相关（line-series-updaters.js）
                // ======================
                case 'line-showsymbol_radio':
                    updatedOptions = updateLineShowSymbol(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-symbol_select':
                    updatedOptions = updateLineSymbol(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-symbolsize_slider':
                    updatedOptions = updateLineSymbolSize(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-lineStyle-width_number':
                    updatedOptions = updateLineLineStyleWidth(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-smooth_radio':
                    updatedOptions = updateLineSmooth(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-smooth-monotone_select':
                    updatedOptions = updateLineSmoothMonotone(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'series-areastyle-show_radio':
                    updatedOptions = updateLineAreaStyleShow(value, currentOptions);
                    this.chart.setOption(updatedOptions, true);
                    break;
                case 'line-areastyle-color_colorpicker':
                    updatedOptions = updateLineAreaStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-areastyle-color-gradient-show_radio':
                    updatedOptions = updateLineAreaGradientShow(value, currentOptions, defaultGradients);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-areastyle-color-start_colorpicker':
                    updatedOptions = updateLineAreaGradientStart(value, currentOptions, defaultGradients);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-areastyle-color-end_colorpicker':
                    updatedOptions = updateLineAreaGradientEnd(value, currentOptions, defaultGradients);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-endlabel-show_radio':
                    updatedOptions = updateLineEndLabelShow(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-endlabel-formatter_text':
                    updatedOptions = updateLineEndLabelFormatter(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-endlabel-distance_number':
                    updatedOptions = updateLineEndLabelDistance(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-endlabel-color_colorpicker':
                    updatedOptions = updateLineEndLabelColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-stack_text':
                    updatedOptions = updateLineStack(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'line-step_select':
                    updatedOptions = updateLineStep(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 9. 饼图系列相关（pie-series-updaters.js）
                // ======================
                case 'pie-inner_number':
                    updatedOptions = updatePieInner(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-outer_number':
                    updatedOptions = updatePieOuter(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-clockwise_radio':
                    updatedOptions = updatePieClockwise(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-startangle_number':
                    updatedOptions = updatePieStartAngle(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-minangle_number':
                    updatedOptions = updatePieMinAngle(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-minshowlabelangle_number':
                    updatedOptions = updatePieMinShowLabelAngle(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-itemstyle-borderradius_text':
                    updatedOptions = updatePieItemStyleBorderRadius(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-roseType_select':
                    updatedOptions = updatePieRoseType(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-selectedmode_select':
                    updatedOptions = updatePieSelectedMode(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'pie-selectedoffset_number':
                    updatedOptions = updatePieSelectedOffset(parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 10. 雷达图系列相关（radar-series-updaters.js）
                // ======================
                case 'radar-shape_select':
                    updatedOptions = updateRadarShape(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-splitnumber_number':
                    updatedOptions = updateRadarSplitNumber(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-axisline-linestyle-color_colorpicker':
                    updatedOptions = updateRadarAxisLineColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-axisline-linestyle-opacity_number':
                    updatedOptions = updateRadarAxisLineOpacity(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-splitLine-show_radio':
                    updatedOptions = updateRadarSplitLineShow(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-splitline-linestyle-color_colorpicker':
                    updatedOptions = updateRadarSplitLineColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-splitline-linestyle-opacity_number':
                    updatedOptions = updateRadarSplitLineOpacity(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-indicator_array':
                    updatedOptions = updateRadarIndicator(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-name-show_radio':
                    updatedOptions = updateRadarNameShow(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'radar-name-textstyle-color_colorpicker':
                    updatedOptions = updateRadarNameColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 11. 散点图系列相关（scatter-series-updaters.js）
                // ======================
                case 'scatter-symbolsize_number':
                    updatedOptions = updateScatterSymbolSize(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'scatter-symbol_select':
                    updatedOptions = updateScatterSymbol(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'scatter-large_radio':
                    updatedOptions = updateScatterLarge(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'scatter-largethreshold_number':
                    updatedOptions = updateScatterLargeThreshold(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'scatter-itemstyle-color_colorpicker':
                    updatedOptions = updateScatterItemStyleColor(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'scatter-label-show_radio':
                    updatedOptions = updateScatterLabelShow(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'scatter-label-position_select':
                    updatedOptions = updateScatterLabelPosition(value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 12. 坐标轴相关（axis-updaters.js）
                // ======================
                case 'xaxis-name_text':
                    updatedOptions = updateAxisName('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axislabel-show_radio':
                    updatedOptions = updateAxisLabelVisibility('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axislabel-show_radio':
                    updatedOptions = updateAxisLabelVisibility('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-max_number':
                    updatedOptions = updateAxisMax('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-max_number':
                    updatedOptions = updateAxisMax('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-min_number':
                    updatedOptions = updateAxisMin('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-min_number':
                    updatedOptions = updateAxisMin('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-position_select':
                    updatedOptions = updateAxisPosition('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-position_select':
                    updatedOptions = updateAxisPosition('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-offset_number':
                    updatedOptions = updateAxisOffset('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-offset_number':
                    updatedOptions = updateAxisOffset('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-nametextstyle-color_colorpicker':
                    updatedOptions = updateAxisNameTextColor('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-nametextstyle-fontsize_number':
                    updatedOptions = updateAxisNameTextFontSize('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-nametextstyle-fontweight_select':
                    updatedOptions = updateAxisNameTextFontWeight('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-nametextstyle-fontweight_select':
                    updatedOptions = updateAxisNameTextFontWeight('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-nametextstyle-fontstyle_select':
                    updatedOptions = updateAxisNameTextStyle('x', 'fontStyle', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-nametextstyle-fontstyle_select':
                    updatedOptions = updateAxisNameTextStyle('y', 'fontStyle', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axislabel-color_colorpicker':
                    updatedOptions = updateAxisLabelColor('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axislabel-interval_number':
                    updatedOptions = updateAxisLabelInterval('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axislabel-interval_number':
                    updatedOptions = updateAxisLabelInterval('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axislabel-replace_radio':
                    updatedOptions = updateAxisLabelReplace('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-max-char_radio':
                    updatedOptions = updateAxisLabelMaxChar('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axislabel-rotate_number':
                    updatedOptions = updateAxisLabelRotate('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axislabel-rotate_number':
                    updatedOptions = updateAxisLabelRotate('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-inverse_radio':
                    updatedOptions = updateAxisInverse('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-inverse_radio':
                    updatedOptions = updateAxisInverse('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axisline-show_radio':
                    updatedOptions = updateAxisLineVisibility('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axisline-show_radio':
                    updatedOptions = updateAxisLineVisibility('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axisline-linestyle-color_colorpicker':
                    updatedOptions = updateAxisLineStyle('x', 'color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axisline-linestyle-color_colorpicker':
                    updatedOptions = updateAxisLineStyle('y', 'color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-axisline-linestyle-width_number':
                    updatedOptions = updateAxisLineStyle('x', 'width', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axisline-linestyle-width_number':
                    updatedOptions = updateAxisLineStyle('y', 'width', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-splitline-linestyle-color_colorpicker':
                    updatedOptions = updateAxisSplitLineStyle('x', 'color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-splitline-linestyle-color_colorpicker':
                    updatedOptions = updateAxisSplitLineStyle('y', 'color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-splitline-linestyle-width_number':
                    updatedOptions = updateAxisSplitLineStyle('x', 'width', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-splitline-linestyle-width_number':
                    updatedOptions = updateAxisSplitLineStyle('y', 'width', parseInt(value), currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-scale_radio':
                    updatedOptions = updateAxisScale('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-scale_radio':
                    updatedOptions = updateAxisScale('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-show_radio':
                    updatedOptions = updateAxisVisibility('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-show_radio':
                    updatedOptions = updateAxisVisibility('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-name_text':
                    updatedOptions = updateAxisName('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-name-textstyle-color_colorpicker':
                    updatedOptions = updateAxisNameStyle('x', 'color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-name-textstyle-color_colorpicker':
                    updatedOptions = updateAxisNameStyle('y', 'color', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-axislabel-color_colorpicker':
                    updatedOptions = updateAxisLabelColor('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-nametextstyle-color_colorpicker':
                    updatedOptions = updateAxisNameTextColor('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-nametextstyle-fontsize_number':
                    updatedOptions = updateAxisNameTextFontSize('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'xaxis-splitline-show_radio':
                    updatedOptions = updateAxisSplitLineShow('x', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;
                case 'yaxis-splitline-show_radio':
                    updatedOptions = updateAxisSplitLineShow('y', value, currentOptions);
                    this.chart.setOption(updatedOptions);
                    break;

                // ======================
                // 其他保留逻辑（无需外部函数）
                // ======================
                case 'xaxis-vertical-show_radio':
                    // 坐标轴横竖切换逻辑（依赖组件内部状态，保留原实现）
                    if (currentOptions) {
                        const isVertical = value === 'true';
                        let categories = [];
                        if (isVertical) {
                            categories = currentOptions.xAxis?.[0]?.data || [];
                        } else {
                            categories = currentOptions.yAxis?.[0]?.data || [];
                        }
                        const seriesData = currentOptions.series?.[0]?.data || [];

                        if (isVertical) {
                            currentOptions.xAxis[0].type = 'value';
                            currentOptions.yAxis[0].type = 'category';
                            currentOptions.xAxis[0].data = [];
                            currentOptions.yAxis[0].data = categories;
                        } else {
                            currentOptions.xAxis[0].type = 'category';
                            currentOptions.yAxis[0].type = 'value';
                            currentOptions.xAxis[0].data = categories;
                            currentOptions.yAxis[0].data = [];
                        }
                        this.chart.setOption(currentOptions, true);
                    }
                    break;
                case 'base-data-url_text':
                    this.updateData(value); // 数据更新逻辑保留
                    break;
                case 'echart-timer':
                    this.setTimer(parseInt(value) * 1000); // 定时器逻辑保留
                    break;
                case 'base-echart-timer_number':
                    this.setTimer(parseInt(value) * 1000); // 定时器逻辑保留
                    break;

                case 'base-echart-timer-script_text':
                    this.echartTimerScript = value;
                    this.setTimer(parseInt(this.getAttribute('base-echart-timer_number')) * 1000);
                    break;

                // 默认：未处理的属性
                default:
                    console.log(`未处理的属性: ${name}`);
            }
        }
        // 组件断开连接时清理资源
        disconnectedCallback() {
            window.removeEventListener('resize', this.resizeChart.bind(this));

            if (this.observer) {
                this.observer.disconnect();
            }

            clearInterval(this.timerId);
        }

        // 调整图表大小
        resizeChart() {
            if (this.chart) {
                this.chart.resize();
            }
        }

        // 设置定时器
        setTimer(interval) {
            clearInterval(this.timerId);
            if (interval > 0) {
                this.timerId = setInterval(() => {
                    this.executeScript();
                }, interval);
            }
        }

        executeScript() {
            if (typeof this.echartTimerScript !== 'string' || this.echartTimerScript.trim() === '') {
                console.log("没有可执行的定时器脚本（为空或非字符串类型）");
                return;
            }

            try {
                let script = this.echartTimerScript.trim();

                // 通用正则：匹配任意函数名(参数)，且参数未加引号的情况
                // 匹配规则：
                // \w+                匹配函数名（字母、数字、下划线）
                // \(                 匹配左括号
                // \s*                匹配可能的空格
                // ([^'"\)]+?)        匹配参数（不包含单引号、双引号、右括号）
                // \s*                匹配可能的空格
                // \)                 匹配右括号
                script = script.replace(
                    /(\w+)\(\s*([^'"\)]+?)\s*\)/g,
                    (match, funcName, param) => {
                        // 给参数添加双引号（自动处理参数前后的空格）
                        return `${funcName}("${param.trim()}")`;
                    }
                );

                // 绑定上下文执行脚本
                const scriptFunction = new Function(script);
                scriptFunction.call(this);
            } catch (error) {
                console.error("定时器脚本执行错误:");
                console.error("错误原因:", error.message);
                console.error("原始脚本内容:", this.echartTimerScript);
                console.error("处理后脚本内容:", script);
                console.error("错误位置:", error.stack);
            }
        }




        // 获取图表实例
        getChartInstance() {
            return this.chart;
        }
        // 测试定时执行的方法
        testTimer(text) {
            alert("定时执行" + text)
        }

        // 更新数据
        async updateData(dataurl) {
            try {
                if (!dataurl) {
                    throw new Error("数据请求URL不能为空");
                }
                if (!this.chart) {
                    throw new Error("图表实例未初始化");
                }

                const response = await fetch(dataurl);
                if (!response.ok) {
                    throw new Error(`HTTP请求失败: ${response.status}`);
                }

                const data = await response.json();
                const { buildConfig } = window.attributeUtils;
                const config = this.getDefaultConfig();

                const seriesConfig = buildConfig(this, config.seriesAttrs);
                const titleConfig = buildConfig(this, config.titleAttrs);
                const gridConfig = buildConfig(this, config.gridAttrs);
                const xAxisConfig = buildConfig(this, config.xAxisAttrs);
                const yAxisConfig = buildConfig(this, config.yAxisAttrs);
                const legendConfig = buildConfig(this, config.legendAttrs);

                this.chart.clear(); // 先清空图表
                this.renderChart(seriesConfig, titleConfig, gridConfig, xAxisConfig, yAxisConfig, legendConfig, data);

            } catch (error) {
                console.error(`数据更新失败: ${error.message}`);
            }
        }

    }
    export default BaseBarChartComponent;
